function DialogDetails(container, item, options) {
  this._container = container;
  this._item = item;
  this._options = options;
  
  this._createElements();
};

DialogDetails.prototype._createElements = function() {
  var gui, div, table, mtr, mtd, input, select,  unique = MiscUtils.unique();
  DOMUtils.removeChildElements(this._container);
  

  var table = document.createElement('table');
  table.style.backgroundColor = '#eeeeee';
  table.style.borderBottom = 'solid 1px #B3B3BA';
  table.style.padding = '10px 0';
  table.style.width = '500px';
  table.style.height = '10px';
  this._container.appendChild(table);
  
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  td.align = 'center';
  td.style.verticalAlign = 'middle';
  td.style.width = '30px';
  td.style.height = '25px';
  
  td = tr.insertCell(-1);
  td.align = 'left';
  td.style.width = '60px';
  td.style.verticalAlign = 'middle';
  td.style.fontWeight = 'bold';
  td.style.color = '#695f55';
  td.style.fontSize = '10pt';
  td.appendChild(document.createTextNode('Product'));
  
  td = tr.insertCell(-1);
  td.align = 'left';
  td.style.verticalAlign = 'middle';
  td.style.width = '200px';
  td.style.color = '#000';
  td.id = unique + '_sample_div';
  
  td = tr.insertCell(-1);
  td.align = 'left';
  td.style.verticalAlign = 'middle';
  td.style.width = '60px';
  td.id = unique + '_quantityPic_div';
  td.style.fontWeight = 'bold';
  td.style.color = '#695f55';
  td.style.fontSize = '10pt';
  td.appendChild(document.createTextNode('Quantity'));
  td = tr.insertCell(-1);
  td.style.width = '40px';
  td.id = unique + '_quantity_div';
  td.style.textAlign = 'center';
  
  td = tr.insertCell(-1);
  td.align = 'left';
  td.style.verticalAlign = 'middle';
  td.style.width = '60px';
  td.id = unique + '_pricePic_div';
  td.style.fontWeight = 'bold';
  td.style.color = '#695f55';
  td.style.fontSize = '10pt';
  td.appendChild(document.createTextNode('Price'));
  td = tr.insertCell(-1);
  td.style.width = '40px';
  td.id = unique + '_price_div';
  td.style.textAlign = 'center';
  
  td = tr.insertCell(-1);
  td.style.width = '30px';
  
  if (this._item) {
    var atable = document.createElement('table');
    atable.style.backgroundColor = '#eeeeee';
    atable.style.borderBottom = 'solid 1px #B3B3BA';
    atable.style.padding = '10px 0';
    atable.style.width = '500px';
    atable.style.height = '10px';
    this._container.appendChild(atable);
    
    tr = atable.insertRow(-1);
    td = tr.insertCell(-1);
    td.style.width = '30px';
    td = tr.insertCell(-1);
    td.align = 'left';
    this._attributeTable = document.createElement('table');
    this._attributeTable.cellPadding = 0;
    this._attributeTable.cellSpacing = 0;
    td.appendChild(this._attributeTable);
    td = tr.insertCell(-1);
    td.style.width = '30px';

    while (this._attributeTable.rows.length > 0) {
      this._attributeTable.deleteRow(0);
    }
    for (var i = 0, il = this._item.pi_selects.length; i < il; i++) {
      atr = this._attributeTable.insertRow(-1);
      atd = atr.insertCell(-1);
      atd.style.backgroundColor = '#faf9f4';
      atd.style.borderBottom = 'solid 2px #eee';
      atd.style.height = '24px';
      atd.align = 'right';
      var itable = document.createElement('table');
      itable.cellPadding = 0;
      itable.cellSpacing = 0;
      atd.appendChild(itable);
      
      itr = itable.insertRow(-1);
      itd = itr.insertCell(-1);
      itd.style.width = '60px';
      var span = document.createElement('span');
      span.style.color = '#695f55';
      span.style.fontSize = '14px';
      span.style.fontFamily = '黑体';
      span.style.fontWeight = 'bold';
      span.style.margin = '0 0 0 5px';
      span.id = unique + '_' + i + '_name_div';
      itd.appendChild(span);

      itd = itr.insertCell(-1);
      itd.style.borderLeft = 'dashed 1px #ccc';
      itd.style.height = '24px';
      itd.style.width = '58px';
      itd.style.cursor = 'pointer';
      itd.style.color = '#000000';
      itd.style.fontSize = '13px';
      itd.style.fontFamily = '宋体';
      itd.align = 'center';
      itd.id = unique + '_' + i + '_option_div';
      itd = itr.insertCell(-1);
    }
    
    if (this._item.pi_type == '{{$smarty.const.SAMPLE_TYPE_ALBUM|escape:javascript}}' || this._item.pi_type == '{{$smarty.const.SAMPLE_TYPE_MAGAZINE|escape:javascript}}' || this._item.pi_model == '{{$smarty.const.MODEL_NAME_ALBUM_DESIGN|escape:javascript}}') {
      var tr, td;
      var dtable = document.createElement('table');
      dtable.style.backgroundColor = '#eee';
      dtable.style.borderBottom = 'solid 1px #B3B3BA';
      dtable.style.width = '500px';
      dtable.style.height = '10px';
      this._container.appendChild(dtable);
      
      tr = dtable.insertRow(-1);
      td = tr.insertCell(-1);
      td.style.width = '30px';
      td = tr.insertCell(-1);
      td.align = 'left';
      this._designTable = document.createElement('table');
      this._designTable.cellPadding = 0;
      this._designTable.cellSpacing = 0;
      this._designTable.id = unique + '_design_div';
      td.appendChild(this._designTable);
      td = tr.insertCell(-1);
      td.style.width = '30px';
    }
  }
  
  var gui = GuiDialogDetails.instance(unique, this._item);
  new HandleDialogDetails(gui, this._item, this._options);
};